// React中的条件渲染

import React, {Component} from 'react';
import './Greeting.css'

// 我们通过条件来渲染对应的登录状态组件
import UserGreeting from './UserGreeting';
import GusetGreeting from './GusetGreeting';

// 阻止组件渲染
import Warning from './Warning'

class Greeting extends Component {
    constructor(props){
        super(props);
        this.state = {
            isLogin: true
        }
        this.handleIn = this.handleIn.bind(this);
        this.handleOut = this.handleOut.bind(this);
    }

    handleIn(){
        this.setState({
            isLogin: true
        })
    }

    handleOut(){
        this.setState({
            isLogin: false
        })
    }

    render(){
        let button = null;
        let IsGreeting = null;
        const isLoggedIn = this.state.isLogin;
        if(isLoggedIn){
            button = <button onClick={this.handleOut}>退出登录</button>
            IsGreeting = <UserGreeting/>
        }else {
            button = <button onClick={this.handleIn}>点击登录</button>
            IsGreeting = <GusetGreeting/>
        }
        return (
            <div className="main">
                我是Greeting组件
                {IsGreeting}
                {button}
                <div><Warning/></div>
            </div>
        )
    }
}

export default Greeting;

// tips: 在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。
// 所以我们也可以用 与运算符(&&) 来渲染元素

// 三元运算符(condition ? true : false)，也可以用来渲染元素。如果条件过于复杂，你应该解耦组件来写业务逻辑、功能模块等。